<ion-header [translucent]="true">
	<ion-toolbar>
		<ion-buttons slot="start">
			<ion-menu-button></ion-menu-button>
		</ion-buttons>
		<ion-title>网络检查</ion-title>
		<ion-buttons slot="end">
			<ion-button color="success" (click)="settings()">
				<ion-icon slot="start" name="settings"></ion-icon>
				<ion-label>设置</ion-label>
			</ion-button>
		</ion-buttons>
	</ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
	<ion-list>
		<ng-container *ngFor="let t of res">
			<ion-item *ngIf="t.type===0">
				<ion-badge slot="start" color="medium" title="ICMP序列号">{{ t.packet.seq }}</ion-badge>
				<ion-label>
					{{ t.packet.bytes }} 字节，来自
					{{ t.packet.addr }} ( {{t.packet.ipAddr}} )
					生存 {{ t.packet.ttl }}
				</ion-label>
				<ion-badge slot="end" color="primary" title="ping 的往返时间">{{ t.packet.rtt | duration }}</ion-badge>
			</ion-item>
			<ng-container *ngIf="t.type===1">
				<ion-grid>
					<ion-row>
						<ion-col>
							<ion-item>
								<ion-label>网络地址</ion-label>
								{{ t.stats.addr }}
							</ion-item>
						</ion-col>
						<ion-col>
							<ion-item>
								<ion-label>IP地址</ion-label>
								{{ t.stats.ipAddr }}
							</ion-item>
						</ion-col>
					</ion-row>
					<ion-row>
						<ion-col>
							<ion-item>
								<ion-label>传输的数据包数量</ion-label>
								<ion-badge slot="end" color="light">{{ t.stats.packetsSent }}</ion-badge>
							</ion-item>
							<ion-item>
								<ion-label>接收的数据包数量</ion-label>
								<ion-badge slot="end" color="light">{{ t.stats.packetsRecv }}</ion-badge>
							</ion-item>
							<ion-item>
								<ion-label>重复响应数据包数量</ion-label>
								<ion-badge slot="end" color="danger">{{ t.stats.packetsRecvDuplicates }}</ion-badge>
							</ion-item>
							<ion-item>
								<ion-label>丢包率</ion-label>
								<ion-badge slot="end" color="danger">{{ t.stats.packetLoss }} %</ion-badge>
							</ion-item>
						</ion-col>
						<ion-col>
							<ion-item>
								<ion-label>最小往返时间</ion-label>
								<ion-badge slot="end" color="primary">{{ t.stats.minRtt | duration }}</ion-badge>
							</ion-item>
							<ion-item>
								<ion-label>平均往返时间</ion-label>
								<ion-badge slot="end" color="primary">{{ t.stats.avgRtt | duration }}</ion-badge>
							</ion-item>
							<ion-item>
								<ion-label>最大往返时间</ion-label>
								<ion-badge slot="end" color="primary">{{ t.stats.maxRtt | duration }}</ion-badge>
							</ion-item>
							<ion-item>
								<ion-label>往返时间标准偏差</ion-label>
								<ion-badge slot="end" color="success">{{ t.stats.stdDevRtt | duration }}</ion-badge>
							</ion-item>
						</ion-col>
					</ion-row>
				</ion-grid>
			</ng-container>
		</ng-container>
	</ion-list>
</ion-content>

<ion-footer>
	<ion-item>
		<ion-label slot="start" position="fixed">网络地址</ion-label>
		<ion-input [(ngModel)]="address" [autofocus]="true" (keydown)="($event.keyCode === 13)?ping():0"
			[disabled]="isPing"></ion-input>
		<ion-button expand="full" size="large" color="primary" (click)="ping()" [disabled]="isPing">
			<ion-icon name="send" slot="start"></ion-icon>
			<ion-label>测试</ion-label>
		</ion-button>
	</ion-item>
</ion-footer>
